<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="../templates/manageui.xhtml">
	<ui:define name="head">
	</ui:define>


	<ui:define name="customStyle">
		<style type="text/css">
.testreg {
	vertical-align: top;
}

.setWidth {
	width: 155px;
}

.setWidth2 {
	width: 128px;
}

.picturePreview {
	width: 210px;
	height: 200px;
	text-align: center;
	vertical-align: middle;
}

.uploadify-button {
	background-color: transparent;
	border: none;
	padding: 0;
}

.uploadify:hover .uploadify-button {
	background-color: transparent;
}

div #picText {
	background: #333;
	color: white;
	/**display: none;***/
	visibility: hidden;
}

TABLE#headshot:hover #picText {
	/* display: block; */
	visibility: visible;
}

/**for text show **/
.alpha1,.alpha2 {
	width: 100%;
	height: auto;
	min-height: 25px; /* 必需 */
	_height: 25px; /* 必需 */
	overflow: hidden;
	background-color: #7CAEFB; /* 背景色 */
}

.alpha1 {
	filter: alpha(opacity =             
		                                                         
		               70);
	/* IE 透明度20% */
	opacity: 0.7;
}

.alpha2 {
	-moz-opacity: 0.7; /* Moz FF 透明度20%*/
	opacity: 0.7; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/
}

.ap2 {
	position: absolute;
}

/***for unlock button***/
.ui-icon-excel {
	background-image: url("#{request.contextPath}/images/Unlock_16x16.png")
		!important;
}

.btn_save {
	background: url("#{request.contextPath}/images/save.png") no-repeat
		scroll 0px -31px transparent !important;
	width: 146px;
	height: 31px;
	display: block;
}

.btn_save:hover {
	background: url("#{request.contextPath}/images/save.png") no-repeat
		scroll 0px 0px transparent !important;
	width: 146px;
	height: 31px;
}

.ui-blockui {
	background-color: yellow;
	background-image: none;
	opacity: 0.3;
}
</style>
	</ui:define>

	<ui:define name="customJS">
		<script src="#{request.contextPath}/uploadify/jquery.uploadify.js"
			type="text/javascript"></script>
		<script type="text/javascript">
		/* Need to keep open with the button disiplay  */
		$(document).ready(function(){

$("#uploadify").uploadify({
	'fileSizeLimit': '1024KB',
	'fileTypeDesc' : 'Image Files',
	'fileTypeExts' : '*.gif; *.jpg; *.png',
	/* 'buttonImage' : '#{request.contextPath}/uploadify/browse-btn.png', */
	'buttonText'  : 'Change photo',
	swf           : '#{request.contextPath}/uploadify/uploadify.swf',
	/**make this width value >= div width**/
	width         : 250,
	height		  : 25,
	uploader      : '#{request.contextPath}/uploadservlet?key=<h:outputText value="#{loginBean.key}"/>&amp;param=editProfile&amp;t=#{now.time}',
	'onQueueComplete' : function(queueData) {
		$("#hiddenLink").click();
    },
	'onDestroy' : function() {
	}
});  
		}); 


		</script>


	</ui:define>
	<ui:define name="customCSS">
		<link rel="stylesheet" media="screen"
			href="#{request.contextPath}/uploadify/uploadify.css" type="text/css" />
	</ui:define>


	<ui:define name="content">
		<script type="text/javascript"
			src="#{request.contextPath}/js/ddaccordion.js" />


		<script type="text/javascript">  

		ddaccordion.init({
			headerclass: "expandable", //Shared CSS class name of headers group that are expandable
			contentclass: "categoryitems", //Shared CSS class name of contents group
			revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
			mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
			collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
			defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
			onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
			animatedefault: false, //Should contents open by default be animated into view?
			persiststate: true, //persist state of opened contents within browser session?
			toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
			togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
			animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
			oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
				//do nothing
			},
			onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
				//do nothing
			}
		})
		
		
		
		
     function handleUnlockRequest(xhr, status, args) {
		     //alert("into handleUnlockRequest");
		     //alert(args);
         if (!args.unlockFlag) {
        	 //alert("unlock fail!");
         }else{
             //alert("unlock okay!");
             PF('bui').hide();
             }
     }
</script>
		<div id="dataPage">

			<div>
				<h:form prependId="false">
					<div
						style="float: left; padding-left: 64px; color: rgb(221, 75, 57); font-size: 20px; font-family: Arial, sans-serif;">
						Accounts
						<!-- <p:commandButton actionListener="#{loginBean.setLock}" image="ui-icon-excel"
							oncomplete="handleUnlockRequest(xhr, status, args)"
							update=":growl">
						</p:commandButton> -->
						<!-- <p:commandButton icon="ui-icon-locked"
							actionListener="#{loginBean.setLock}"
							oncomplete="handleUnlockRequest(xhr, status, args)"
							update=":growl" />	 -->
						<p:outputPanel id="lockComponent" autoUpdate="true"
							layout="inline">
							<p:commandLink actionListener="#{loginBean.setLock}"
								oncomplete="handleUnlockRequest(xhr, status, args)"
								update=":growl,lockComponent">
								<h:graphicImage value='/images/lock.png' width="24" height="24"
									style="vertical-align: top;"></h:graphicImage>
							</p:commandLink>
						</p:outputPanel>
					</div>
				</h:form>
			</div>
			<BR /> <BR />
			<DIV style="border-bottom: 1px solid rgb(235, 235, 235);"></DIV>
			<br />
			<div
				style="float: left; width: 244px; font-family: Arial, sans-serif; font-size: 13px; border-right: 1px solid rgb(235, 235, 235); height: 620px">


				<div class="arrowlistmenu">
					<h3 class="menuheader expandable">Account</h3>
					<ul class="categoryitems">
						<li><a href="#">Account Activity</a></li>
						<li><a href="#">Dashboard</a></li>
						<li><a href="#">Download your data</a></li>
						<li><a href="#">Me on the web</a></li>
					</ul>
					<h3 class="menuheader expandable">Security</h3>
					<ul class="categoryitems">
						<li><a href="#">Recent Activity</a></li>
					</ul>
					<h3 class="menuheader" style="cursor: default">Profile and
						privacy</h3>
					<h3 class="menuheader" style="cursor: default">Google+</h3>
					<p:outputPanel id="showGroup"
						rendered="#{loginBean.adminAuthority}">
						<h3 class="menuheader expandable">Groups</h3>
						<ul class="categoryitems">
							<li><a href='#{request.contextPath}/manage/editGroups.jsf'
								style="text-decoration: none;">Account Authorty</a></li>
						</ul>


					</p:outputPanel>

				</div>
			</div>
			<DIV style="margin-left: 244px;">
				<h:form id="Form" prependId="false"
					style="width:95% ;text-align:left;">
					<p:panel id="detailsPanel" style="border: 0px ;height:620px;">
						<h:panelGrid columns="2" columnClasses=",testreg">
							<h:panelGrid id="editGrid"
								style="text-align: left; margin: 25px 10px 40px;width:425px;border-right: 1px solid rgb(235, 235, 235);"
								cellspacing="8" columns="3" columnClasses="setWidth,setWidth2,">

								<h:outputText value="diaplay Name:"></h:outputText>
								<h:panelGroup id="show1">
									<h:outputText value="#{loginBean.user.username}"
										rendered="#{!loginBean.authorities}"></h:outputText>
									<p:inputText value="#{loginBean.user.username}"
										rendered="#{loginBean.authorities}"></p:inputText>
								</h:panelGroup>
								<p:commandButton icon="ui-icon-locked"
									actionListener="#{loginBean.setLock}" update="show1,:growl"
									style="visibility:hidden" id="lock"></p:commandButton>


								<h:outputText value="Email:"></h:outputText>
								<p:inputText value="#{loginBean.user.email}"></p:inputText>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="First Name:"></h:outputText>
								<p:inputText value="#{loginBean.user.firstName}"></p:inputText>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="Last Name:"></h:outputText>
								<p:inputText value="#{loginBean.user.lastName}"></p:inputText>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="Password:" />
								<p:password value="#{loginBean.user.password}" redisplay="true"
									readonly="true"></p:password>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="Birthday" />
								<p:calendar value="#{loginBean.user.dob}" id="popupButtonCal"
									pattern="yyyy-MM-dd">
									<f:convertDateTime pattern="yyyy-MM-dd"
										timeZone="Asia/Chongqing" />
								</p:calendar>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="Gender:" />
								<p:selectOneMenu value="#{loginBean.user.gender}"
									style="width:135px;text-align:left;" title="select your gender"
									id="gender">
									<f:selectItem itemLabel="Select" itemValue="" />
									<f:selectItem itemLabel="Male" itemValue="M" />
									<f:selectItem itemLabel="Female" itemValue="F" />
									<f:validateLength minimum="1" />
								</p:selectOneMenu>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="secret question:" />
								<p:selectOneMenu value="#{loginBean.user.secretQuestion}"
									style="width:135px;text-align:left;"
									title="select your question" id="question">
									<f:selectItem itemLabel="Select" itemValue="" />
									<f:selectItem itemLabel="which place you like best?"
										itemValue="which place you like best?" />
									<f:selectItem itemLabel="What's my family name ?"
										itemValue="What's my family name ?" />
									<f:selectItem itemLabel="What's my dog name ?"
										itemValue="What's my dog name ?" />
								</p:selectOneMenu>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="secret Answer:" />
								<p:inputText id="answer" value="#{loginBean.user.secretAnswer}">
								</p:inputText>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>

								<h:outputText value="your interests:" />
								<p:selectOneMenu value="#{loginBean.user.custInterests}"
									style="width:135px;text-align:left;"
									title="select your interests" id="interests">
									<f:selectItem itemLabel="Select" itemValue="" />
									<f:selectItem itemLabel="Book" itemValue="book" />
									<f:selectItem itemLabel="travel" itemValue="travel" />
									<f:selectItem itemLabel="Tech" itemValue="tech" />
								</p:selectOneMenu>
								<p:commandButton icon="ui-icon-locked" style="visibility:hidden"></p:commandButton>


								<!-- added clear button -->

							</h:panelGrid>

							<!-- headshot partion -->
							<h:panelGrid id="headshot">
								<div style="margin-top: 20px;" id="showPic">

									<p:outputPanel id="uploadComponent" autoUpdate="true"
										layout="block">
										<!-- if have headshot -->
										<p:graphicImage value="#{loginBean.user.image}"
											rendered="#{not empty loginBean.user.image}"
											id="editHeadshot" style="width: 100%;" alt=" " cache="false">
											<f:param value="#{now.time}"></f:param>
										</p:graphicImage>
										<!-- if have not headshot -->
										<p:graphicImage id="default" style="width: 100%;" alt=" "
											rendered="#{empty loginBean.user.image}"
											value="/images/default-no-profile-pic.jpg" />
									</p:outputPanel>

									<!-- text display float the image -->
									<!--Fixed bakgroud  opacity
									<div
										style="text-align: center; margin-top: -43px; position: relative;"
										id="picText"> -->
									<div style="text-align: center; margin-top: -43px;"
										id="picText">
										<div class="alpha1">
											<div class="ap2"></div>
											<!--[if IE]><![if !IE]><![endif]-->
											<div class="alpha2"></div>
											<!--[if IE]><![endif]><![endif]-->
										</div>
										<p
											style="text-align: center; margin-top: -25px; position: relative; color: white;">
											<input id="uploadify" type="file" style="" />
										</p>
									</div>
								</div>

								<!-- show preview by url-->
								<!-- <p:graphicImage id="preview" style="width:55px;" alt=" "
									value="#{registerBean.image}" cache="false">
									<f:param value="#{now.time}"></f:param>
								</p:graphicImage>-->
								<h:outputText value="#{loginBean.uploadFileName}" id="text"
									style="visibility:hidden;" />


							</h:panelGrid>
						</h:panelGrid>




					</p:panel>







					<!-- weicheng added for callBack backing bean method  -->
					<!-- <p:commandLink id="hiddenLink" actionListener="#{loginBean.upload}"
						update="editHeadshot,text" style="display:none">
					</p:commandLink> -->
					<p:commandLink id="hiddenLink" actionListener="#{loginBean.upload}"
						update="uploadComponent,text" style="display:none">
					</p:commandLink>

					<!-- add save button  -->
					<!-- use button -->
					<!-- <p:commandButton id="updateInfo"
						style="float:right;bottom: 40px;margin-right: 26px;"
						action="#{loginBean.doUpdateInfo()}" icon="ui-icon-check"
						value="Save" update=":growl" /> -->

					<!-- use link -->
					<p:commandLink id="updateInfo"
						style="float:right;bottom: 40px;margin-right: 26px; margin-top: -42px;"
						action="#{loginBean.doUpdateInfo()}" update=":growl"
						styleClass="btn_save">
						<!-- <h:graphicImage value='/images/save.png' 
							style="vertical-align: top;"></h:graphicImage> -->
					</p:commandLink>



				</h:form>

				<p:blockUI block="Form" widgetVar="bui" blocked="true" />
			</DIV>

		</div>
	</ui:define>
</ui:composition>